import React, { useState, useEffect } from 'react';
import { PeopleItem } from '../Item/PeopleItem'
import Board from '../Board';
import classnames from 'classnames';
import { Link } from 'react-router-dom';


const Album = (props) => {
    const [album, setAlbum] = useState({});
    const [userid, setUserid] = useState('')
    const [name, setName] = useState('')
    const [userName, setUserName] = useState('')
    const [userIcon, setUserIcon] = useState('')
    const [imgs, setImgs] = useState([]);
    const [total, setTotal] = useState(0);


    let setrch = async () => {
        if (props.match.params.id !== undefined) {
            let resp = await fetch('/api/index/getAlbum?id=' + props.match.params.id);
            if (resp.ok) {
                let data = await resp.json();
                let t = 0;
                let imgstemp = [];
                for (let index = 0; index < data.album.length; index++) {
                    let imgs = data.album[index].imgs.split(',');
                    imgs.forEach(img => {
                        imgstemp.push({ url: img, name: data.album[index].content });
                    });
                    t += imgs.length;
                }
                setAlbum(data);
                setName(data.classify.name);
                setImgs(imgstemp);
                setTotal(t);
                setUserid(data.classify.userid);
                setUserIcon(data.user.icon);
                setUserName(data.user.name);

            }
        } else {
        }
    }

    useEffect(() => {
        setrch();
        return () => {

        };
    }, [props.match.url]);

    return (
        <div className="content">
            <div className="main-head">
                <div className='album-head'>
                    <h1 className='album-title'>{name}</h1>
                    <p className='album-total'>{`${total}图片`}</p>
                    <Link className='album-user' to={`/people/${userid}`}>
                        <img src={`/img/${userIcon}`} className='avatar'></img>
                        <span className='name'>{userName}</span>
                    </Link>
                </div>
            </div>
            <div className="main-list-album">
                {imgs.map(i=>{
                    console.log(i)
                    return <div className='woo'>
                        <div className='mbpho'>
                            <img src={`/img/${i.url}`}></img>
                        </div>
                        <div className='woosrc'>
                            <div className='g'>{i.name}</div>
                        </div>
                    </div>
                })}
            </div>
        </div>
    );
}

export default Album
